<template>
   <div class="list">
       <div class="container">
            <div class="title">
                <h1 class="ac-title">案例集</h1>
                
           </div>
            <div class="item-body">
                <!-- <div class="item">
                    <div class="item-img">

                    </div>
                    <h1 class="item-title">dfdsfsd</h1>
                    <p class="guide">fsdafsadfa</p>
                </div> -->
                <router-link 
                tag="a" target="_blank"
                :to="{name: 'designItemDetail', params: {id:item.id}}" 
                class="item"
                v-for="item of this.data"
                :key="item.id"
                >
                    <div class="item-img">
                        <img :src="item.url" alt="">
                    </div>
                    <h1 class="item-title">{{item.first_title}}</h1>
                    <p class="guide">{{item.second_title}}</p>
                </router-link >
                

            </div>
       </div>   
            
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'

export default {
  name: 'design-list',
  components:{
   
  },
  props:{
     
     data:Array 
  },
  data () {
    return {
        name:'',
        summary:''
    }
  },
  watch:{
    data(){
        // console.log(this.data)
         for(var i =0;i<this.data.length;i++){
                if(this.data[i].img_url!=null){
                    this.url = this.data[i].img_url.url
                    // console.log(this.url)
                    this.data[i]['url'] = this.url
                }
                

               
               
            }
    }
  },
  computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
 
    
  },
  methods:{
   
  }
 
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
    display block
.title  
    overflow hidden
    margin 35px 0
.container
    container() 
.title>h1
  title()
.ac-title::after
  titleAfter()
.go
  go()
.item-body 
    overflow hidden 
.item 
    float left
    overflow hidden
    width 384px
    height 420px
    background white
    margin 25px 8px
.item-img 
    width 100% 
    height 290px
    // background red
    overflow hidden
.item-title
    font-size 16px
    margin 20px 10px
    font-weight bold
    color black
.guide 
    margin 0 10px
    font-size 14px 
    color #666666
    text-overflow:ellipsis;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
</style>
